<template>
    <div class="loginBg">
          <div class="wt">
                <div class="txtCenter font30 pb30">帐号注册</div>
                <div class="ht">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" label-width="100px" class="login-ruleForm">
                        <template>
                            <el-form-item label="" prop="userName">
                                <el-input placeholder="邮箱/手机号码/小米ID" v-model="ruleForm.userName"></el-input>
                            </el-form-item>
                            <el-form-item label="" prop="userPassword">
                                <el-input placeholder="密码" type="password" v-model="ruleForm.userPassword"></el-input>
                            </el-form-item>
                        </template>
                        <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">
                            <template>登录</template>
                            <template>注册</template>
                        </el-button>
                    </el-form-item>
                  </el-form>
                </div>
          </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      box1Show: false,
      box2Show: false,
      ruleForm: {
        userName: '',
        userPassword: ''
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'change' }
        ],
        userPassword: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            message: '注册成功',
            type: 'success'
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    box1 () {
      this.box1Show = true
    },
    box2 () {
      this.box2Show = true
    }
  }
}
</script>

<style scoped lang="scss">
   .loginBg{
       height: calc(100vh - 180px);
       padding-top: 40px;
       background: #f5f5f5;
       .wt{
           width: 880px;
           padding:3% 0 4% 0;
           background: #fff;
           margin: auto;
           .el-button{
                display: block;
                padding: 0;
                line-height: 44px;
                border-radius: 0;
                width: 100%;
                margin-top:20px;
            }
       }
       .ht{
           width: 330px;
           margin: auto;
       }
       .el-select{
           display: block;
       }
   }
   .xieyi{
       text-align: center;
       padding-top: 80px;
   }
   .tipsHeight{
       max-height: calc(100vh - 420px);
       overflow-y: auto;
       background: #f5f5f5;
       padding: 15px 20px;
       line-height: 1.7;
   }
   .loginBg /deep/ .el-form--label-top .el-form-item__label{padding-bottom:0}
   .loginBg /deep/ .el-input__inner{border-radius: 0;}
   .loginBg /deep/ .el-form-item__error{padding-top: 0;line-height: 22px;}
   .el-dialog__wrapper /deep/ .el-dialog__body{ padding-top: 0;}
   .loginBg /deep/{
       +footer{display: none;}
   }
</style>
